const path = require('path')
//路由设置对象
const resolve = (dir) => path.resolve(__dirname, dir);
// 是否为生产环境
const isProduction = process.env.NODE_ENV === 'production';
// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin');

// const express = require("express")
// const app = express()
// var webapi = require("./webapi/api.json")
// var apiRouter = express.Router()
// app.use("/api", apiRouter)


const webpack = require('webpack');
const { Console } = require('console');
module.exports = {
    //.env.development（开发环境）、.env.test（测试环境）、.env.production文件（生产环境）
    //部署应用包时的基本 URL
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    // 相对路径
    baseUrl: './',
    //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
    outputDir: 'wwwroot',
    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: 'assets',
    // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
    lintOnSave: isProduction ? true : false, //是否关闭eslint检测
    //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
    runtimeCompiler: true,
    // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾   默认false 可以加快打包
    productionSourceMap: false,
    configureWebpack: config => {
        // 生产环境相关配置
        if (isProduction) {
            //gzip压缩
            const productionGzipExtensions = ['html', 'js', 'css', "json"];
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                    threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                    deleteOriginalAssets: false, // 删除原文件
                })
            );

            // 公共代码抽离
            config.optimization = {
                // 分割代码块
                splitChunks: {
                    cacheGroups: {
                        //公用模块抽离
                        common: {
                            chunks: 'initial',
                            minSize: 0, //大于0个字节
                            minChunks: 2, //抽离公共代码时，这个代码块最小被引用的次数
                        },
                        //第三方库抽离
                        vendor: {
                            priority: 1, //权重
                            test: /node_modules/,
                            chunks: 'initial',
                            minSize: 0, //大于0个字节
                            minChunks: 2, //在分割之前，这个代码块最小应该被引用的次数
                        },
                    },
                },
            };

            //npm install terser-webpack-plugin -D 安装插件
            // 返回一个将会被合并的对象
            return {
                optimization: {
                    minimizer: [
                        new TerserPlugin({
                            sourceMap: false,
                            terserOptions: {
                                compress: {
                                    drop_console: true
                                }
                            }
                        })
                    ]
                }
            }

        } else {
            // 为开发环境修改配置...
        }
    },
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
        //    requireModuleExtension: false
    },
    // webpack-dev-server 相关配置
    devServer: { // 设置代理
        hot: true, //热加载
        host: process.env.LOCAL_IP, // 本地IP设置  '0.0.0.0', //ip地址
        port: 8000, //端口
        https: false, //false关闭https，true为开启
        open: true, //自动打开浏览器
        proxy: {
            '/api': { //本地 
                target: 'https://localhost:7037/api/', // 此处为接口地址
                // 如果要代理 websockets
                ws: true,
                changeOrigin: true, // 是否允许跨域
                pathRewrite: { // 重写路径 目的是把/api开始的接口重写 （如/api/users 改成/users）
                    '^/api': ''
                }
            },
            '/test': { //测试
                target: 'xxx'
            },
            '/pre': { //预发布
                target: 'xxx'
            },
            '/pro': { //正式
                target: 'xxx'
            }
        }
    },
    pluginOptions: { // 第三方插件配置
        // ...
    },

    chainWebpack: config => {
        // 修复HMR
        config.resolve.symlinks(true);
        // 修复Lazy loading routes  按需加载的问题，如果没有配置按需加载不需要写，会报错
        config.plugin("html").tap(args => {
            args[0].chunksSortMode = "none";
            return args;
        });

        //quill-editor 引入插件
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            'window.Quill': 'quill'
        }])

        //添加别名
        config.resolve.alias
            .set("@", resolve("src"))
            .set("$storage", resolve("src/api/public/storage.js"))
            .set("$router", resolve("src/router"))
            .set("$enum", resolve("src/api/public/enum.js"))
        // 压缩图片
        config.module
            .rule("images")
            .test(/\.(gif|png|jpe?g|svg)$/i)
            .use("image-webpack-loader")
            .loader("image-webpack-loader")
            .options({
                // mozjpeg: { progressive: true, quality: 65 },
                // optipng: { enabled: false },
                // pngquant: { quality: "65-90", speed: 4 },
                // gifsicle: { interlaced: false },
                // webp: { quality: 75 }
            });
    }

}